<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>



<style>
.ui-autocomplete-loading {
	background: white url('images/ui-anim_basic_16x16.gif') right center
		no-repeat;
}
</style>
<script>
	$(function() {
		
		function split(val) {
			return val.split(/,\s*/);
		}
		function extractLast(term) {
			return split(term).pop();
		}

		
		var countUser = 0;

		$("#birds")
		// don't navigate away from the field on tab when selecting an item
		.bind(
				"keydown",
				function(event) {
					if (event.keyCode === $.ui.keyCode.TAB
							&& $(this).data("autocomplete").menu.active) {
						event.preventDefault();
					}
				}).autocomplete({
			source : function(request, response) {
				$.get("userinfoes/users", {
					term : extractLast(request.term)
				}, response);
			},
			search : function() {
				// custom minLength
				var term = extractLast(this.value);
				if (term.length < 2) {
					return false;
				}
			},
			focus : function() {
				// prevent value inserted on focus
				return false;
			},
			select : function(event, ui) {
				//var terms = split(this.value);
				// remove the current input
				//terms.pop();
				// add the selected item
				//terms.push();
				// add placeholder to get the comma-and-space at the end
				//terms.push("");
				//this.value = ui.item.value;
				$('#user').append("<input name='users' type='hidden' value='"+ui.item.value+"'/>'");
				$('#user').append("<label >"+ui.item.value+"</label></br>");
				countUser++;
				return false;
			}
		});
	});
</script>


<h2>Add Room For You</h2>
<div class="ui-state-default ui-corner-all "
	style="padding: 10px; margin: 10px">

	<form:form modelAttribute="groupInfo" action="groupinfoes/add">
		<div class="ui-widget" style="padding: 5px">
			<label for="tags">GroupName: </label> <input name="groupName"
				id="tags">

		</div>
		
		<div class="ui-widget" style="padding: 5px">
			<label for="birds">Users: </label> <input id="birds" />
		</div>
		<div id="user" class="ui-widget"
			style="padding: 5px; margin: 5px ">
			<label for="tags" style="padding: 5px">test werqw</label></br>
			<label for="tags" style="padding: 5px">test sadas </label>
		</div>

		<div class="ui-widget">
			<input type="submit" value="Submit" />
		</div>

	</form:form>
</div>
